<script>
import {defineComponent} from 'vue'
import MyButton from "@/components/MyButton.vue";
import MyHeader from "@/components/MyHeader.vue";
import MyList from "@/components/MyList.vue";

export default defineComponent({
  name: "App",
  data() {
    return {
      position: 'center'
    }
  },
  components: {
    MyList,
    MyHeader,
    MyButton,
  }

})
</script>

<template>
  <div class="app">

    <hr>

    <!--默认插槽-->
    <MyButton>按钮</MyButton>

    <hr>

    <!--具名插槽-->
    <MyHeader>
      <template v-slot:left>
        <span>后退</span>
      </template>
      <template v-slot:center>
        <span>标题</span>
      </template>
      <template v-slot:right>
        <span>前进</span>
      </template>
    </MyHeader>

    <hr>

    <!--具名插槽的简写-->
    <MyHeader>
      <template #left>
        <span>后退</span>
      </template>
      <template #center>
        <input type="text">
      </template>
      <template #right>
        <span>前进</span>
      </template>
    </MyHeader>

    <hr>

    <!--具名插槽的动态插槽名-->
    <MyHeader>
      <template v-slot:[position]>
        <input type="text">
      </template>
    </MyHeader>
    <button @click="position='left'">左边</button>
    <button @click="position='center'">中间</button>
    <button @click="position='right'">右边</button>

    <hr>

    <!--作用域插槽-->
    <MyList>
      <template #center="{persons}">
        <ul>
          <li v-for="item in persons" :key="item.id">{{ item.name }}</li>
        </ul>
      </template>
    </MyList>

    <hr>

    <MyList>
      <template #center="{persons}">
        <ol>
          <li v-for="item in persons" :key="item.id">{{ item.name }}</li>
        </ol>
      </template>
    </MyList>

  </div>
</template>

<style lang="less">
</style>
